<template>
  <div>
     <!-- 表格 -->
    <el-table
      :data="eventList.records"
      style="width: 100%"
      text-align="center"
      height="180"
       highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="eventName" label="小班名称">
      </el-table-column>
      <el-table-column prop="eventTime" label="日期">
      </el-table-column>
      <el-table-column prop="areaBean.areaName" label="发生位置">
      </el-table-column>
      <el-table-column prop="eventControl" label="防治方案" >
      </el-table-column>
      <el-table-column prop="eventStage" label="灾情状态" >
      </el-table-column>
    </el-table>


    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="eventList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>


    <!-- 添加事件 -->
    <div style="text-align: left">
      <el-button
        type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加事件</el-button
      >
      <el-dialog
        title="添加事件"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="display: flex" class="msg">
          <div>
            <p style="margin: 50px 30px">
              事件名称：<input type="text" v-model="eventName" />
            </p>
            <!-- <p style="margin: 50px 30px">
              时间：<input type="text" v-model="eventTime" />
            </p> -->
            <p style="margin: 50px 30px">
              灾情阶段：<select v-model="eventStage">
                <option>已经得到控制</option>
                <option>防治中</option>
                <option>无法解决，申请专家会商</option>
              </select>
            </p>
            <p style="margin: 50px 30px">
              灾情描述：<input type="text" v-model="eventDescribe" />
            </p>
            <p style="margin: 50px 30px">
               发生位置：<select v-model="areaName">
                <option value="1">雅林一号地区</option>
                <option value="2">雅林二号地区</option>
                <option value="3">卧龙自然保护区</option>
                <option value="4">泡桐一号地区</option>
              </select>
            </p>
            <p style="margin: 50px 30px">
              初步损失：<input type="text" v-model="eventLoss" />
            </p>
            <p style="margin: 50px 30px">
              防治方案：<input type="text" v-model="eventControl" />
            </p>
          </div>
          <div>
            <p style="margin: 50px 30px">
              灾区图片<el-upload
              class="avatar-uploader"
              action="/api/upload/upload"
              :http-request="testUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload" >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </p>
            <p style="margin: 50px 30px">
              灾害类型
              <select v-model="eventType">
                <option>虫害</option>
                <option>鼠害</option>
                <option>病害</option>
              </select>
            </p>
            <p style="margin: 50px 30px">
              发现途径
              <select v-model="eventWay">
                <option>小班巡查发现</option>
                <option>公众发现</option>
                <option>上级部门通报</option>
              </select>
            </p>
            <p style="margin: 50px 30px">
              所在小班：<input type="text" v-model="className" />
            </p>
            <p style="margin: 50px 30px">
              影响面积：<input type="text" v-model="eventArea" />
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addEvent()">确 定</el-button>
        </div>
      </el-dialog>


    </div>





  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: "70px",
      imageUrl:"",
      pageNo:"",
      pages:"",
      eventId:"",
      eventName:"",//事件名称

      eventStage:"",//灾情状态
      eventDescribe:"",//灾情描述
      eventLoss:"",//损失
      eventType:"",//灾害类型
      eventWay:"",//发现途径
      eventArea:"",//影响面积
      eventImg:"",//图片
      eventPro:"",//专家建议
      eventControl:"",//防治措施
      startTime:"",
      endTime:"",
      areaName:"",//区域
      className:"",//所在小班
    }
  },
  computed:{
    ...mapState("area",["eventList","eventParam"]),
  },
  methods:{
    ...mapMutations("area",["setEventParam"]),
    ...mapActions("area",["findAllEvent"]),
    ...mapActions("area",["findEventName"]),
    async addEvent(){
       let parmaObj = {
        eventName: this.eventName,

        eventStage: this.eventStage,
        eventDescribe: this.eventDescribe,
        areaName:this.areaName,
        eventLoss:this.eventLoss,
        eventControl:this.eventControl,
        eventImg:this.eventImg,
        eventType:this.eventType,
        eventWay:this.eventWay,
        className:this.className,
         eventArea:this.eventArea,
      };
      let info = await this.ajax.getSubmit("/api/event/addEvent", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllEvent();
     },
     async testUpload(item) {
      let info = await this.ajax.uploadSubmit("/api/upload/upload", {
        file: item.file,
      });
      console.log(info);
      this.imageUrl = "/api/img/" + info;
      this.eventImg = "/img/" + info;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
     get() {
      let paramObj = this.eventParam;
      paramObj.eventName = this.eventName;
      paramObj.eventStage = this.eventStage;
      paramObj.area = this.area;
      paramObj.startTime = this.startTime;
      paramObj.endTime = this.endTime;
      // 把最新的信息装入 store中的 param对象中
      this.setEventParam(paramObj);
      this.findEventName()
    },
     handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.eventParam;
      paramObj.pageNo = pageNo;
      this.setEventParam(paramObj);
      this.findAllEvent();
    },
    handleTableRow(row) {
      console.log(row.eventId);
      this.eventId = row.eventId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

  },
  created(){
    this.findAllEvent()
    console.log(this.eventList.records)
  }

}
</script>

<style>

</style>